In the last lesson, we implemented all the logic for getting a new item from the main process, such
as this one locked in the console and in the lesson prior to that, we also created and styled the HTML
that will represent such an item in our app, meaning we can now go ahead and display items received
back from the main process.
And furthermore, per system, all of this will of course be happening in the main window renderer.
So over to update JS where instead of logging this new item out, we can now add it to the items element.
I'm once again going to separate all of the functions relating to items into a separate module.
This way, approaches can control the overall app function, things like user interface, etc. and items,
not just the module will create can be responsible for abstracting item logic, meaning to add an item
will call on the items module add item passing at the new item received from the main process.
Create the items module starting with the require statement again.
Concert items equals require items locally, so referring to items dodges at the file in the Renderer
directory as that's where we're requiring it from new file items.
Yes, so far we are calling the add item function on this module.
So start by creating that exported function export, not add item, not module, not exports this time
as will be exporting multiple functions on this module, this being a function as we're calling it here.
So taking the new item as its only argument equals a function with the item parameter being that new
item.
Then we can create a new HTML element, as we styled it earlier.
Let item note equal document dot create element a dev.
A sign the class we styled as we have it in mind, DOCSIS read item.
Item note dot set attribute class Reid Desh item.
Then we can add the inner HTML to this new device being the thumbnail image and the title item note
dot in our HTML equals using a template literal for better legibility, an image tag with a source attribute
of item.
This item here dot screenshot the data URL of this item, screenshot the H2 title tag with the title
of the item item dot title and finally append this to the items container.
We don't have a reference to the items note in this module, so create that.
Let items equal document don't get element by I.D..
Items same as in approaches a pending the new item no to the items div with items dot append child item
A. We can test this save.
Add a new item.
I'll do electron STG again.
And a second later, that item is added to our app with our existing styles.
Also note that the no items message is now no longer visible as it's obscured by this item, a convenient
solution to not have to show and hide it manually.
I'll do another say, GitHub dot com.
And done so, we're now successfully adding items to our app, but when I reload, the window gone.
So the next step then is to persist or store items in our app.
For the sake of keeping this simple, I'll be using local storage, the bolt in storage already available
in every browser.
In no instance, if you recall from the session, less in local storage is stored in the default electron
session.
So a perfectly reliable storage option for simple data such as this back in items suggests I'll create
an array to hold all of the items.
That way we have one variable to manage and persist.
Exports, dot storage, storage being the name of the array to hold the items equals an empty array
for now.
Next, add the module function for assisting the storage array or items array exports dot save equals
a function in which we can save the entire storage array to local storage calling local storage not
set item.
The set item function either creates or overrides a key in local storage, storing our items on redit
items.
The local storage key name this storage.
But local storage only supports simple strings, not objects.
So string afie this array object worth json dot string Afie there each time save is called or items
dot save.
We store this entire array of items as a string in local storage, meaning each time the app starts
will also want to set the storage array to the value of the items key in local storage.
So loading back in all of our items we can get that array from local storage immediately when this module
is required with local storage dot get item reedit items.
This key we're saving our items to again, keeping in mind that we stored this as a string.
So convert that back to an array with Jason Dort pass.
If this entry doesn't exist, will want to still said storage to an empty array.
So using a simple conditional say or empty array, then we'll have to make sure each time a new item
is added, it goes into this storage array.
So immediately after appending an item, we can add it to the storage array and possess that array to
local storage.
This storage push item, the item object we added calling immediately after the not safe, updating
the local storage entry test, this, of course, we have no items as the app relaunched.
So add back GitHub dot com, meaning this item will now have been added to items dot storage and return
to local storage.
We can check that in the dev tools application tab.
Local storage.
There we see the read items key with its value automatically passed and logged in the relevant console,
an array with one entry being this one item object.
Expand that and we see the screenshot title and your URL.
Yet still, when we reload this window, our items are gone, we might have saved them, but we're not
adding the stored items back when the window loads.
So let's do that.
Add items from storage.
This array, when uploads, we can simply loop the storage array and manually add each item, this stored
storage for each, providing us the item in the loop function, calling this dot add item, this function
here with the current item in the loop.
Only problem now is if we do this will be pushing each existing item into the storage array a second
time and saving it, not what we want.
So we're going to need a condition here.
If is new, a function argument will create.
Now add and save the item add that is new argument to the function.
With a default value of false, so not a new item, meaning this will now work as expected and not add
the items a second time, false being the default.
But in Abduh is when adding a new item, we can say the second argument to true only having items fresh
from the main process pushed to and persisted in the storage array.
Test this again.
I'll save all.
And immediately, our one existing item is shown when the app launches, add another.
Electron dot org.
We now see two items in the local storage entry as this new item was stored, reload and both items
is loaded.
So that's how are items done and persisted in the next lesson, we can create the code to select filter
and open items.